<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-12 col-sm-12 col-md-7 col-lg-7 col-xl-7">
        <h5 class="card-title text-center text-info">FormGroup</h5>
        <form [formGroup]="exampleForm" class="row g-3">
          <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" formControlName="name">
          </div>
          <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
            <label for="releaseDate" class="form-label">Release Date</label>
            <input type="text" class="form-control" id="releaseDate" formControlName="releaseDate">
          </div>
          <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
            <label for="budget" class="form-label">Budget</label>
            <input type="text" class="form-control" id="budget" formControlName="budget">
          </div>
          <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
            <label for="worldwide" class="form-label">Worldwide</label>
            <input type="text" class="form-control" id="worldwide" formControlName="worldwide">
          </div>
          <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <label for="summary" class="form-label">Summary</label>
            <textarea class="form-control" id="summary" rows="3" id="summary" formControlName="summary"></textarea>
          </div>
          <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="franchise" formControlName="franchise">
              <label class="form-check-label" for="franchise">
                Franchise
              </label>
            </div>
          </div>
          <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
            <button type="submit" (click)="resetControls()" class="btn btn-primary btn-sm">Reset Controls</button>
          </div>
          <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
            <button type="submit" (click)="updateControls()" class="btn btn-primary btn-sm">Update Controls</button>
          </div>
        </form>
      </div>
      <div class="col-12 col-sm-12 col-md-5 col-lg-5 col-xl-5">
        <h5 class="card-title text-center text-primary">FormGroup Result</h5>
        <strong>Value</strong>
        <div [innerHTML]="exampleForm.value | prettyjson"></div>
      </div>
    </div>
  </div>
</div>
